<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>OA模拟与实现</title>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/authoruty.css}"/>
    <link rel="stylesheet" th:href="@{/css/file.css}"/>
    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <style>
        .type{
            display: none;
        }
    </style>
</head>
<script>
    $(function(){
        var filebol = false;
        $("#file").change(function(){
            $("#filemsg").text("");
            var file = $(this)[0].files[0];
            var fileName = file.name;
            var fileSize = (parseInt(file.size)/1024).toFixed(2);
            var fileType = file.type;
            console.log(fileSize+" ** "+fileName+" ** "+fileType);
            if(fileName.length>50){
                filebol=false;
                $("#filemsg").css("color","red").text("文件不能太长");
                return;
            }
            if(fileSize>10000){
                filebol=false;
                $("#filemsg").css("color","red").text("文件过大，所选文件不能超过10MB")
            }else{
                filebol=true;
            }
        })
        $("#upfile").submit(function(){
            var p1 = $(".recive_1").val();
            var p2 = $(".recive_2").val();
            if(p1=="--请选择接收人群--"&&p2=="--请选择接收人--"){
               return false;
            }
            return filebol;
        })
    })
</script>
<body>
    <div class="container-fluid">
        <ol class="breadcrumb nav-top">
            <li><a th:href="@{~/router/index.html}" target="main">Home</a></li>
            <li class="active">文件上传</li>
        </ol>
        <div class="panel panel-info">
            <div class="panel-heading">文件上传</div>
            <div class="panel-body">
                <form id="upfile" action="/file/upFile" method="post" enctype="multipart/form-data" class="form-inline align-self-center">
                    <div class="">
                        <label for="file" class="">选择文件：</label>
                        <input type="file" name="mfile" class="" id="file" placeholder="选择文件">
                        <span id="filemsg"></span>
                    </div>
                    <div class="" id="redio">
                        <label class="">发送方式：</label>
                        <label for="type1"><span>群发</span></label>
                        <input type="radio" checked value="群发" class="" name="fstype" id="type1">&nbsp;
                        <label for="type2"><span>私发</span></label>
                        <input type="radio" value="私发" class="" name="fstype" id="type2">
                    </div>
                    <div class="">
                        <label for="type2"><span>选择接收人：</span></label>
                        <select name="frupposition" class="type recive_1">
                            <option readonly>--请选择接收人群--</option>
                            <option value="2">讲师</option>
                            <option value="3">辅导员</option>
                        </select>
                        <input type="hidden" value="" id="positionname" name="fruppositionname">
                        <!-- 二选择一 -->
                        <select name="fruppeopleid" class="type recive_2">
                            <option readonly>--请选择接收人--</option>
                            <option th:each="people : ${teacherName}" th:value="${people.oid}">[[${people.oname}]]</option>
                        </select>
                        <input type="hidden" value="" id="peoplename" name="fruppeoplename">
                    </div>
                    <div class="">
                        <div class="">
                            <button type="submit" class="btn btn-info">上传</button>
                            <a href="/file/sendfile.html" class="btn btn-info">返回</a>
                        </div>
                    </div>
                </form>
            </div>
            
        </div>
        
    </div>
</body>
<script>
    $(function(){
        var position = $(".recive_1 option:selected").text();

        $("#positionname").val(position);
            var c = $("#redio input[name='fstype']:checked").val();
            init(c);
            $("input[name='fstype']").click(function(){
                init($(this).val());
            })
            function init(c){
                if(c=='群发'){
                    $(".recive_2").attr("disabled","disabled").hide();
                    $(".recive_1").removeAttr("disabled");
                    $("#peoplename").val("");
                    $(".recive_1").show();
                }else if(c=='私发'){
                    $(".recive_1").attr("disabled","disabled").hide();
                    $(".recive_2").removeAttr("disabled");
                    $("#positionname").val("");
                    $(".recive_2").show();
                }
            };

            $(".recive_1").change(function(){
                var position = $(".recive_1 option:selected").text();
                console.log(position)
                $("#peoplename").val("");
                $("#positionname").val(position);
            });
            $(".recive_2").change(function(){
                var peoplename = $(".recive_2 option:selected").text();
                console.log(peoplename)
                $("#positionname").val("");
                $("#peoplename").val(peoplename);
            })
        })
</script>
</html>